<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb"
           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
           v-if="setting.collapse&&!isHorizontal">
        <i class="icon-navicon"
           @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenu"
                v-if="setting.menu"></top-menu>
      <top-search class="top-bar__item"
                  v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <el-tooltip v-if="setting.lock" content="锁屏" placement="bottom" effect="light">
        <top-lock class="top-bar__item"></top-lock>
      </el-tooltip>
      <el-tooltip v-if="setting.theme" content="主题" placement="bottom" effect="light">
        <top-theme class="top-bar__item"></top-theme>
      </el-tooltip>
      <el-tooltip v-if="setting.fullscren" content="语言" placement="bottom" effect="light">
        <top-lang class="top-bar__item"></top-lang>
      </el-tooltip>
      <el-tooltip v-if="setting.fullscren" content="全屏" placement="bottom" effect="light">
        <top-full class="top-bar__item"></top-full>
      </el-tooltip>
      <el-tooltip v-if="setting.fullscren" content="调试" placement="bottom" effect="light">
        <top-logs class="top-bar__item"></top-logs>
      </el-tooltip>
      <div class="top-user">
        <el-dropdown>
          <div>
            <img class="top-bar__img" :src="userInfo.avatar">
            <!-- 公司名称展示 -->
            <span class="el-dropdown-link">{{ userInfo.deptFullName }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 首页 -->
<!--              <el-dropdown-item>-->
<!--                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>-->
<!--              </el-dropdown-item>-->
              <!-- 个人信息 -->
              <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              <!-- 退出登录 -->
              <el-dropdown-item @click="logout" divided>
                {{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topLogs from './top-logs.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topLang,
    topFull,
    topSetting
  },
  name: 'top',
  data() {
    return {};
  },
  filters: {},
  created() {
  },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal'
    ])
  },
  methods: {
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
